<!DOCTYPE html>
<html>
	<head>
		<!-- 为机器提供信息的 -->
		<meta charset="utf-8">
		<title>饿了么后天管理页面admin</title>
		<link rel="stylesheet" href="./css/reset.css" />
		<style type="text/css">
			.container{
				width: 1200px;
				height: 100%;
				background-color: #fff;
				/* 左右居中 */
				margin: 0 auto; 
				min-width: 1000px;
			}
			.container header{
				width: 100%;
				height: 60px;
				margin-bottom: 10px;
				background-color: #EAEAEA;
			}
			.container nav{
				width: 100%;
				height: 50px;
				margin-bottom: 10px;
				background-color: #EAEAEA;
			}
			.container .main{
				width: 100%;
				height: 100%;
				margin-bottom: 10px;
				display: flex;
			}
				.container .main aside{
					background-color: #EAEAEA;
					margin-right: 10px;
				}
				
				.container .main section{
					background-color: #EAEAEA;
				}
				
				.container footer{
					width: 100%;
					height: 200px;
					background-color: #EAEAEA;
				}
		</style>
	</head>
	<body>
		<!-- div 总盒子，不建议是body做总盒子 -->
		<!-- 1-1-3-1 -->
		<div class="container">
			<!-- 1 ，头部 -->
			<header>我是头部</header>
			<!-- 1 页面导航部分 -->
			<nav>导航</nav>
			<!-- 3 页面主体部分 -->
			<div class="main">
				<aside style="flex: 0 0 250px;">左侧边栏</aside>
				<section style="flex: 1 1 auto;">
					<p>内容部分</p>
					<p>内容部分</p>
					<p>内容部分</p>
					<p>内容部分</p>
					<p>内容部分</p>
					<p>内容部分</p>
					<p>内容部分</p>
					<p>内容部分</p>
					<p>内容部分</p>
					<p>内容部分</p>
					<p>内容部分</p>
					<p>内容部分</p>
				</section>
					
			</div>
			<footer>版权页</footer>
		</div>
	</body>
</html>
